<template>
    <div class="item-container" :class="{disabled: soldOut}" @click="clickItem">
        <img :src="item.cover_pic">
        <div class="info-container">
            <p class="p30 black ellipsis2L">{{slicedDescription}}</p>
            <p class="p30 colored">￥{{item.price}}</p>
            <!-- 注意这里的agent_price只是暂时用来做京东价 请务必与goods_id商品的agent_price区分 -->
            <p class="p26 darkGrey">京东价：￥{{item.agent_price}}</p>
            <Bonus :bonus="item.bonus"></Bonus>
            <ProgressBar :all="Number(item.stock) + Number(item.sales_num)" :done="item.sales_num" style="marginTop:.2rem"></ProgressBar>
        </div>
        <div v-if="soldOut" class="sold-out"></div>
    </div>
</template>
<script>
import Bonus from '@/components/Bonus'
import ProgressBar from '@/components/Progress'
export default {
    name: 'item',
    methods: {
        clickItem(){
            if(this.soldOut) return
            else this.$router.push(`/goods/detail/${this.item.pre_goods_id}`)
        }
    },
    computed:{
        soldOut(){
            return this.item.stock == 0
        },
        slicedDescription(){
            const des = this.item.description
            return des.length < 34 ? des : `${des.slice(0, 33)}...`
        }
    },
    props: ['item'],
    components: { Bonus, ProgressBar }
}
</script>
<style lang="less" scoped>
.item-container{
    padding: .2rem;
    width: 100%;
    background: #fff;
    border-bottom: 1.5px solid #ddd;
    display: inline-block;
    position: relative;
    img{
        width: 3.5rem;
        height: 3.5rem;
    }
    .info-container{
        display: inline-block;
        width: ~'calc(100% - 3.6rem)';
        padding: 0 .2rem;
        vertical-align: top;
        .ellipsis2L{
            min-height: 1rem;
        }
        .colored{
            font-weight: bold;
            margin-top: .1rem;
        }
        .darkGrey{
            margin-bottom: .1rem;
        }
    }
    .sold-out{
        position: absolute;
        width: 2rem;
        height: 2rem;
        background: url(../assets/img/common/soldOut.png);
        background-size: contain;
        bottom: .5rem;
        right: .7rem;
    }
}
</style>
